<template>
  <div class="approvalProcess">
    <el-timeline :reverse="reverse">
      <el-timeline-item
        v-for="(item, index) in activities"
        :key="index"
        :timestamp="item[0].createtime"
        :icon="item[0].remark == '审批通过'?'el-icon-circle-check':item[0].remark == '审批不通过'?'el-icon-circle-close':'el-icon-more-outline'"
        :color="item[0].remark == '审批通过'?'#409EFF':item[0].remark == '审批不通过'?'#F56C6C':'#909399'"
        size="large"
      >
        <div class="item-box">
          <div class="item-childe"  v-for="(activity) in item" :key="activity.cuserid">
            <el-card shadow="hover">
              <div class="creator">{{activity.creator}}</div>
              <div class="remark">
                <span>{{activity.remark}}</span>
                <el-button
                  v-if="activity.remark == '审批不通过'"
                  type="primary"
                  size="mini"
                  round
                  @click="toPage()"
                >重新提交</el-button>
                <!-- <el-button type="primary" size="mini" round @click="toPage()">重新提交</el-button> -->
              </div>
            </el-card>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
import { wlcSysLogList } from "../../api/api";
export default {
  props: ["detail"],
  data() {
    return {
      reverse: false,
      activities: [],
    };
  },
  methods: {
    getList() {
      wlcSysLogList({
        orderNum: this.detail.orderNum,
        // type: this.detail.type,
        buyType: this.detail.buyType,
        deptnameId: this.detail.deptnameId
      }).then(res => {
        // console.log(res);
        // this.activities = res;
        let Arr = [];
        for(let a=0;a<res.length;a++){
          // let list = [];
          let obj = Object.assign({},res[a]);
          if(a != 0){
            if(res[a].isInquiry == 'Y' && res[a-1].isInquiry == 'Y'){
              Arr[Arr.length-1].push(obj)
            }else{
              let list = [];
              list.push(obj);
              Arr.push(list);
            }
          }else{
            Arr.push([obj]);
          }
        }
        this.activities = Arr;
        console.log(Arr);
      });
    },
    toPage() {
      this.$router.push({
        path: "purchForm",
        query: {
          id: this.detail.id,
          buyType: this.detail.buyType,
          again: 1
        }
      });
      this.$emit("hideInves");
    }
  },
  mounted() {
    this.getList();
  }
};
</script>
<style lang="less" scoped>
.item-box {
  display: flex;
  .item-childe {
    flex: 1;
    margin-right: 5px;
  }
}
.creator {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.remark {
  font-size: 12px;
  color: #666;
}
</style>